<template>
  <div id="OrderMobile">
      <div class="order_class">
        <ul>
          <li :key="i.group_id" @click="tabindex = index" :class="{active:index==tabindex}" v-for="(i,index) in menuList"><span>{{i.name}}</span></li>
        </ul>
      </div>
      <div class="shop">
        <div :key="i.shop_id" @click="i.num++" v-for="i in menuList[tabindex].menu" class="btn btn-default btn-block">
          <h4>{{i.name}} 
            <div class="menu_count badge" v-if="i.num>0">{{i.num}}</div>
            <div><small class="text-danger">库存 {{i.stock}}</small></div>
          </h4>
        </div>
      </div>
      <div class="cart">
        <div class="c_body">
          <div @click="Added.length>0?showCart=true:''" class="price"> <span class="h3">￥ {{total}}</span> </div>
          <div class="confirm" @click="confirm"><span class="h4">确认下单</span></div>
        </div>
      </div>
      <div @click="Added.length>0?showCart=false:''" v-if="showCart && Added.length>0" class="cart_detail">
        <div class="relative">
          <div @click.stop class="main">
            <table class="table">
              <thead>
                  <tr>
                    <th>#</th>
                    <th>菜品</th>
                    <th class="text-center" width="40%">数量</th>
                  </tr>
              </thead>
              <tbody>
                <tr :key="index" v-for="(i,index) in Added">
                  <td>{{Added.length-index}}</td>
                  <td>{{i.name}}</td>
                  <td class="text-center">
                    <a @click="i.num++" href="javascript:;" class="increase_menu_item pull-left">
                      <h4 class="glyphicon glyphicon-plus-sign text-danger"></h4>
                    </a>  
                    <a @click="i.num--;if(Added.length==0)showCart=false" href="javascript:;" class="remove_menu_item pull-right">
                      <h4 class="glyphicon glyphicon-minus-sign text-danger"></h4>
                    </a> 
                    <h4><a href="javascript:;">{{i.num}}</a></h4>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import { axios, accAdd, accMul } from "@/static/js/utils";
export default {
  name: "OrderMobile",
  data() {
    return {
      menuList: [{ menu: [] }],
      tabindex: 0,
      showCart: false
    };
  },
  computed: {
    Added() {
      let list = [];
      this.menuList.forEach(item => {
        item.menu.forEach(val => {
          if (val.num > 0) {
            list.unshift(val);
          }
        });
      });
      return list;
    },
    total() {
      let total = 0;
      this.Added.forEach(item => {
        total = accAdd(total, accMul(item.price, item.num));
      });
      return total.toFixed(2);
    }
  },
  methods: {
    classNum(i) {
      let classNum = 0;
      i.menu.forEach(item => {
        classNum += item.num;
      });
      return classNum;
    },
    confirm() {
      const id = plus.webview.currentWebview().desk_id;
      const order_id = plus.webview.currentWebview().order_id;
      const type = JSON.parse(localStorage.getItem("userData")).type;
      console.log(type)
      if (this.Added.length > 0) {
        if (type == 1) {
          axios
            .post("menu/create", {
              id,
              order_id,
              menu: this.Added
            })
            .then(res => {
              if (res.data.code) {
                console.log(res.data)
                this.back();
              }
            });
        } else {
          console.log('action')
          axios
            .post("menu/create_action", {
              order_id,
              menu: this.Added
            })
            .then(res => {
              console.log(res.data)
              if (res.data.code) {
                openWindow("Settlement.html", "结账", {
                  order_id: order_id
                });
              }
            });
        }
      }
    },
    back() {
      mui.back();
    }
  },
  created() {
    axios.get("menu/index").then(res => {
      res.data.data.map(item => {
        item.menu.map(val => {
          val.num = 0;
          return val;
        });
        return item;
      });
      this.menuList = res.data.data;
      this.$set(this.menuList, this.tabindex, this.menuList[this.tabindex]);
    });
  }
};
</script>
<style scoped lang="less">
.order_class {
  height: 92vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: #eee;
  width: 20vw;
  text-align: center;
  position: fixed;
  left: 0;
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    li {
      padding: 10px 0;
      color: #bc2923;
    }
    li.active {
      background-color: #bc2923;
      color: white;
    }
  }
}
.shop {
  padding-left: 22vw;
  padding-right: 2vw;
  padding-top: 2vw;
  padding-bottom: 8vh;
  .btn {
    position: relative;
    .menu_count {
      position: absolute;
      right: -5px;
      top: -5px;
      background-color: #bc2923;
      color: #fff;
    }
  }
}
.cart {
  height: 8vh;
  width: 100vw;
  position: fixed;
  bottom: 0;
  background-color: #555;
  .c_body {
    height: 100%;
    display: flex;
    .price {
      color: white;
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 20px;
      .h3 {
        margin: 0;
      }
    }
    .confirm {
      width: 150px;
      background-color: #ec971f;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      .h4 {
        margin: 0;
      }
    }
  }
}
.cart_detail {
  position: absolute;
  height: 92vh;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  .relative {
    position: relative;
    height: 100%;
    width: 100%;
    .main {
      padding: 20px 20px 0 20px;
      background-color: white;
      max-height: 300px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}
</style>

